---
title: 'Theme Color Meta Tag'
---

# Theme Color Meta Tag

_Learn more about `<meta />` theme color on
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
and [CSS Tricks](https://css-tricks.com/meta-theme-color-and-trickery/)._

### with `useThemeUI`

Grab your theme from the context with `useThemeUI`, pick either a background
or accent color from the palette, then use your framework’s method of adding
a meta tag to add to `<head />`.

#### **[`react-helmet`](https://github.com/nfl/react-helmet) in Gatsby**

```jsx
import { Helmet } from 'react-helmet'
import { useThemeUI } from 'theme-ui'

function Example() {
  const { theme } = useThemeUI()

  return (
    <Helmet>
      <meta name="theme-color" content={theme.colors.primary} />
    </Helmet>
  )
}
```

#### **[`next/head`](https://nextjs.org/docs/api-reference/next/head) in Next.js**

```tsx
import Head from 'next/head'

function Example() {
  const { theme } = useThemeUI()

  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="theme-color" content={theme.colors.background} />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
```

### using CSS Custom Properties

You can use custom CSS Properties added by `theme-ui` to access the colors from
a static HTML file.

```html
<meta
  name="theme-color"
  content="var(--theme-ui-colors-primary)"
  media="(prefers-color-scheme: light)"
/>
<meta
  name="theme-color"
  content="var(--theme-ui-colors-background)"
  media="(prefers-color-scheme: dark)"
/>
```

---

_Take note that `@theme-ui/core` does not create CSS custom properties. This
recipe works only with the `theme-ui` umbrella package._
